<template>
  <div class="buttom">
    <ul>
      <li @click="toHome"><i class="fas fa-home" /><p>首页</p></li>
      <li @click="toFind"><i class="far fa-compass" /><p>发现</p></li>
      <li @click="toOrder"><i class="far fa-file-alt" /><p>订单</p></li>
      <li @click="toUser"><i class="far fa-user" /><p>我的</p></li>
    </ul>
  </div>
</template>

<script>
export default {
  name:"ButtomNav",
  data(){
    return{
      loginAcount:456,
      loginPassword:456,
    }
  },
  methods:{
    toHome(){
      this.$router.push({"path": "/home"});
    },
    toFind(){
      this.$router.push({"path": "/find"});
    },
    toOrder(){
      this.$router.push({"path": "/order"});
    },
    toUser(){
        this.$router.push({"path":"/login"});
    }
  }
}
</script>

<style scoped>
.buttom{
  background-color: white;
  position: fixed;
  width: 100%;
  text-align: center;
  bottom: 0;
}
.buttom ul{
  height: 13vw;
  border-top: 1px solid gray;
  display: flex;
  justify-content: space-around;
}
.buttom ul li{
  margin: auto 0;
  font-size: 3.5vw;
  color: gray;
}
</style>